<template>
  <section class="common">
    <p class="common-title">用户验证案例</p>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        <img :src="item.img" class="img" />
        <div>
          <p class="title marginBottom" v-if="item.title">{{ item.title }}</p>
          <p>{{ item.text1 }}</p>
          <p>{{ item.text2 }}</p>
        </div>
      </li>
    </ul>
    <div class="swiperContain" v-for="(item, index) in swiperList" :key="index">
      <p class="subTitle">{{ item.title }}</p>
      <swiper :initialSlide="1">
        <swiper-slide v-for="(v, inde) in item.img" :key="inde">
          <img :src="v" class="img" />
        </swiper-slide>
      </swiper>
    </div>
    <div v-for="(item, index) in swiperSubList" :key="index">
      <ul>
        <li>
          <div>
            <p class="title marginBottom">{{item.title}}</p>
            <p>{{item.text1}}</p>
            <p>{{item.text2}}</p>
          </div>
        </li>
      </ul>
      <swiper :initialSlide="1">
        <swiper-slide v-for="(v, inde) in item.img" :key="inde">
          <img :src="v" class="img" />
        </swiper-slide>
      </swiper>
    </div>
  </section>
</template>

<script lang="ts" setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import { reactive } from 'vue'
//定义ts 接口类型
interface editFormDataType {
  title: string
  img: Array<string>
  text1?: string
  text2?: string
}
const getImage = (name: string) => {
  return new URL(`../../../assets/images/case/verify/${name}`, import.meta.url)
    .href
}
const list = reactive([
  {
    img: `/src/assets/images/case/verify/Frame-276-(2).jpg`,
    title: '用户验证',
    text1:
      '为了进行用户验证，在韩国全国的报勋医院（中央、 釜山、光州、大邱、大田的报勋医院） 导入虹膜识别系统，从始至今艾瑞斯在持续不断的发展',
  },
  {
    img: `/src/assets/images/case/verify/Frame-277-(1).jpg`,
    title: '构建报勋医院的虹膜识别本人身份验证系统',
    text1:
      '·国内首家在韩国国内的5家报勋医院（中央、釜山、光州、大邱、大田报勋医院）构建了虹膜识别系统的企业',
    text2:
      '·用虹膜识别代替居民登记证或身份证，为就医患者提供精确的医疗服务和便捷性',
  },
])
let swiperList: editFormDataType[] = reactive([])
swiperList.push(
  ...[
    {
      title: '中央报勋医院',
      img: [
        getImage('image-134-(1).jpg'),
        getImage('image-135-(1).jpg'),
        getImage('image-136.jpg'),
      ],
    },
    {
      title: '釜山报勋医院',
      img: [
        getImage('image-143.jpg'),
        getImage('image-145.jpg'),
        getImage('image-144.jpg'),
      ],
    },
    {
      title: '光州报勋医院',
      img: [
        getImage('image-146.jpg'),
        getImage('image-147.jpg'),
        getImage('image-148.jpg'),
      ],
    },
    {
      title: '大邱报勋医院',
      img: [
        getImage('image-155.jpg'),
        getImage('image160.png'),
        getImage('image171.png'),
      ],
    },
    {
      title: '大田报勋医院',
      img: [
        getImage('image-158.jpg'),
        getImage('image-156.jpg'),
        getImage('image-159.jpg'),
      ],
    },
    {
      title: '世界银行 Demo Day(2015.02)',
      img: [
        getImage('image166.png'),
        getImage('image165.png'),
        getImage('image167.png'),
      ],
    },
  ]
)
let swiperSubList: editFormDataType[] = reactive([])
swiperSubList.push(
  ...[
    {
      title: '与IBK银行签约',
      text1:
        '前任金融委员长任钟龙（中间）和艾瑞斯金成贤代表（中间）参加了金融科技支援中心第二次Demoday IBK银行和艾瑞斯签订了MOU协议（2015.03）在IBK企业银行的ATM上安装了艾瑞斯的产品，IBK的前任行长权善珠和IBK的其他员工均参与了测试',
      img: [
        getImage('image162.png'),
        getImage('image161.png'),
        getImage('image163.png'),
      ],
    },
    {
      title: '南美厄瓜多尔银行Bank Teller Service',
      text1:
        '在南美国家中的3个银行，33个分店通过安装虹膜识别终端机，进行了本人身份验证相关的金融服务项目 到访银行的客户均可在无ID卡的前提下，通过本人采集的虹膜进行识别',
      text2: ' 预计在ATM服务、移动服务等所有金融服务中都会导入虹膜识别',
      img: [
        getImage('image168.png'),
        getImage('image169.png'),
        getImage('image170.png'),
      ],
    },
  ]
)
</script>

<style lang="scss" scoped>
@import './common.scss';
.common {
  overflow-x: hidden;
  .marginBottom {
    margin-bottom: 20px !important;
  }
  .subTitle {
    display: flex;
    align-items: center;
    // width: 464px;
    height: 104px;
    padding-left: 36px;
    background: linear-gradient(90deg, #daeeff, rgba(218, 238, 255, 0) 100%);
    font-size: 32px;
    font-family: Source Han Sans CN, Source Han Sans CN-Bold;
    font-weight: 700;
    margin-bottom: 20px;
  }
  .swiperContain {
    margin-bottom: 40px;
  }
  .swiper {
    overflow: visible !important;
    width: 500px;
    height: 332px;
    .swiper-slide {
      width: 550px !important;
    }
    .swiper-slide-active {
      margin-right: 20px;
      margin-left: 20px;
    }
  }
  // .swiper-slide{
  //     width: 90%!important;
  //     margin: 0 5%;
  // }
  // .swiper-slide-prev{
  //     right:-8%;
  // }
  // .swiper-slide-next{
  //     left:-8%;
  // }
  ul {
    li {
      div {
        background: linear-gradient(
          90deg,
          #daeeff,
          rgba(218, 238, 255, 0) 100%
        );
      }
    }
  }
}
</style>